<template>
  <div>reactive函数（定义data变量）</div>
  <ul>
    <li>{{ foemDate }}</li>
    <!-- <li @click="change">{{ foemDate.age }}</li> -->
    <li @click="change">{{ name }}:{{ age }}</li>
  </ul>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    // 1.定义变量
    const foemDate = reactive({ name: '小红', age: 18 })
    // 定义方法修改name
    const change = () => {
      // 1.只能局部修改
      foemDate.age = Math.random() * 100
      // 2.不能=修改
      // foemDate = ({ name: '小兰', age: 19 })
    }
    // 这种写法失去响应式
    // return { ...foemDate, change }
    return { ...toRefs(foemDate), change }
  }
}
</script>

<style lang="scss" scoped>
</style>
